import styled from 'styled-components'
import Icon from '../../component/Icon'
import { useEffect, useState } from 'react'
import NotificationCenter from '../../utils/notification'
import { NotificationTimeKey, NotificationTimeName } from './constants'
import { useTranslation } from 'react-i18next'

const Container = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
`

const IconStyle = styled(Icon)`
    width: 85.8%;
    margin-left: .0625rem;
`

const Top = styled(Icon)`
    margin-top: .375rem;
    width: 40%;
    margin-left: .25rem;
`

const Time = styled.div`
    margin-top: .9375rem;
    background: linear-gradient(0deg, #6499F1, #1F61CE);
    border-radius: .8125rem;
    width: 53.6%;
    height: 1.625rem;
    font-weight: 400;
    font-size: .625rem;
    color: #D9FCFF;
    text-shadow: 0px 5px 34px rgba(219,172,113,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
`
interface Props {
}

const Title: React.FC<Props> = () => {
    const { t } = useTranslation()
    const [time, setTime] = useState('')

    useEffect(() => {
        NotificationCenter.observer(NotificationTimeName, (info) => {
            const str: string = info?.userInfo?.[NotificationTimeKey]
            setTime(str ? `${t('ranking.time')}: ${str}` : '')
        })

        return () => {
            return NotificationCenter.removeObserver(NotificationTimeName)
        }

    }, [setTime, t])

    return <Container >
        <IconStyle
            name='ranking_title'
            type='webp'
        />
        <Top
            name='ranking_top'
            type='webp'
        />
        <Time id='time'>{time}</Time>
    </Container>
}

export default Title
